<html>
<head>
    <meta charset="utf-8">
    <title>慕课网 - QQ空间时光轴效果</title>
    <style type="text/css">

        body {
            background: #fff;
            margin: 0px;
            padding: 0;
            padding-top: 41px;
            background: url(images/1.jpg) #1c0c0f center 0 no-repeat fixed;
        }

        .top {
            width: 100%;
            top: 0px;
            height: 41px;
            background-color: #001E3B;
            box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
            position: fixed;
            z-index: 999;
        }

        .header {
            height: 200px;
            background-color: rgba(255, 255, 255, .2);
            width: 960px;
            margin: 0px auto;
        }

        .container {
            width: 960px;
            min-width: 960px;
            margin: 0px auto;
            position: relative;
        }

        .hide {
            display: none;
        }

        .clear {
            clear: both;
            height: 40px
        }

        .scrubber {
            position: absolute;
            top: 29px;
            left: 0px;
            width: 47px;
            z-index: 999
        }

        .scrubber a {
            height: 26px;
            line-height: 26px;
            padding-right: 5px;
            font-size: 12px;
            color: #a5a5a5;
            text-decoration: none;
            display: block;
            border-right: 2px solid #c8c8c8;
            border-right-color: rgba(200, 200, 200, .5);
            text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
            text-align: right;
        }

        .scrubber a:hover,
        .scrubber a.cur {
            border-right-color: #7ebad0;
            color: #7ebad0;
            font-weight: bold;
        }

        .scrubber a:hover {
            text-decoration: underline;
        }

        .scrubber a.cur:hover {
            text-decoration: none;
        }

        .spine {
            display: block;
            width: 3px;
            height: 100%;
            background: #eee;
        }

        #scrubber .s_month {
            display: none;
        }

        .content {
            min-height: 1000px;
            padding-left: 160px;
            padding-top: 50px;
            background: url(images/spine.png) repeat-y 121px 0;
            position: relative;
        }

        .c_year {
            height: 30px;
            line-height: 30px;
            color: #a5a5a5;
            text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
            font-weight: bold;
            font-size: 14px;
            position: relative;
            left: -90px;
            clear: both;
        }

        .c_item {
            width: 370px;
            background: #fff;
            height: auto;
            margin: 20px 30px 0 0;
            position: relative;
            border-radius: 4px;
            color: #888;
        }

        .c_item_left {
            float: left;
        }

        .c_item_first {
            margin-top: -20px;
        }

        .c_item_right {
            float: right;
        }

        .c_item_right .c_i_icon_dot {
            left: -443px;
        }

        .c_i_icon_arrow {
            position: absolute;
            height: 0px;
            border-color: transparent #e2e2e2 transparent transparent;
            border-width: 10px 10px 10px 0;
            border-style: dashed solid dashed dashed;
            border-right-color: #fff;
            left: -10px;
            top: 20px;
        }

        .c_i_icon_dot {
            width: 11px;
            height: 11px;
            border-radius: 11px;
            position: absolute;
            left: -43px;
            top: 25px;
            background: #fff;
        }

        .c_i_icon_dot_child {
            width: 7px;
            height: 7px;
            border-radius: 7px;
            position: absolute;
            left: 2px;
            top: 2px;
            background: #b3dae9;
        }

        .c_i_head {
            padding: 15px 15px 0px 15px;
        }

        .c_i_head_title {
            height: 46px;
            line-height: 46px;
            font-size: 28px;
            padding: 0px 0px 10px 56px;
            position: relative;
        }

        .c_i_head_intro {
            margin-bottom: 10px;
            font-size: 14px;
            line-height: 22px;
            padding: 0 15px;
        }

        .c_i_head_title_icon {
            width: 46px;
            height: 46px;
            background-color: #b3dae9;
            border-radius: 8px;
            position: absolute;
            left: 0px;
            top: 0px;
            overflow: hidden;
            color: #fff;
            font-size: 27px;
            line-height: 23px;
        }

        .c_i_media {
            padding-bottom: 10px;
            height: 277px;
            overflow: hidden;
        }

        .c_i_footer {
            padding: 10px 15px;
            margin: 0px 15px;
            border-top: 1px solid #d6d6d6;
            font-size: 12px;
            color: #b2b2b2;
        }

        .c_i_footer_info {
        }

        .c_i_footer_info .ui_ico {
            width: 20px;
            height: 20px;
            vertical-align: middle;
            visibility: visible;
        }

        .c_i_footer_like {
            line-height: 20px;
            padding-top: 5px;
        }

        .c_i_footer a {
            color: #b2b2b2;
            text-decoration: none;
            padding-right: 10px;
            display: inline-block;
            height: 20px;
        }

        .c_i_footer a:hover {
            color: #6EB8D3;
            text-decoration: underline;
        }

        .ui_ico, .ui_icon {
            width: 15px;
            height: 15px;
            display: inline-block;
            background-repeat: no-repeat;
            font-size: 0;
            overflow: hidden;
        }

        .quote_after {
            vertical-align: bottom;
            background-image: url(images/timeline.png);
            background-position: -986px -102px;
            margin-left: 5px;
        }

        .quote_before {
            vertical-align: top;
            background-image: url(images/timeline.png);
            background-position: -986px -85px;
            margin-right: 5px;
        }

        .ico_zan {
            background-image: url(images/timeline.png);
            background-position: -883px -21px;
        }

        .ico_com {
            background-image: url(images/timeline.png);
            background-position: -897px -42px;
        }
    </style>
</head>
<body>

<!-- 模版定义 -->
<div class="hide">
    <div id="tpl_scrubber_year">
        <a href="javascript:;" onclick="showYear({year},this)" class="s_year" id="scrubber_year_{year}">{year}
            {list}
        </a>
    </div>

    <div id="tpl_scrubber_month">
        <a href="javascript:;" class="s_month {year}_month" onclick="showMonth({year},{month},this)"
           id="scrubber_month_{year}{month}">{month}月</a>
    </div>

    <div id="tpl_content_year">

        <div class="c_year" id="content_year_{year}">{year}</div>
        {list}

    </div>

    <div id="tpl_content_month">

        <div class="c_item c_item_{leftOrRight} content_date_{year}{month} {isFirst}">

            <div class="c_i_icon_arrow"></div>
            <div class="c_i_icon_dot">
                <div class="c_i_icon_dot_child"></div>
            </div>

            <div class="c_i_head">

                <div class="c_i_head_title">
                    <div class="c_i_head_title_icon">{lunar}</div>
                    {date}
                </div>
                <div class="c_i_head_intro">
                    <i class="ui_ico quote_before"></i>
                    {intro}
                    <i class="ui_ico quote_after"></i>
                </div>
            </div>
            <div class="c_i_media">
                {media}
            </div>
            <div class="c_i_footer">
                <div class="c_i_footer_info">
                    <a href="javascript:void(0)" class="op_zan" title="赞">
                        <i class="ui_ico ico_zan">赞</i>({like})</a>
                    <a href="javascript:void(0)" class="op_pin" title="评论">
                        <i class="ui_ico ico_com">评论</i>({comment})</a>
                </div>
                <div class="c_i_footer_like">
                    {like_format}人觉得很赞
                </div>
            </div>

        </div>

    </div>

</div>
<!--  网页内容 -->

<div class="top"></div>
<div class="header"></div>

<div class="container">


    <div class="scrubber" id="scrubber"> <!-- 时序列表 -->
        <!--
                    <a href="javascript:;" onclick="scroll(0)">现在</a>

                    <a href="javascript:;" onclick="showYear(2014,this)" class="s_year">2014
                        <a href="#" class="s_month 2014_month">3月</a>
                    </a>

                    <a href="javascript:;" onclick="showYear(2015,this)" class="s_year">2015
                        <a href="#" class="s_month 2015_month">3月</a>
                    </a>
        -->
    </div>


    <div class="content" id="content"> <!-- 内容 -->

        <!--
                    <div class="c_year">2014</div>

                    <div class="c_item c_item_left" class="item_month_20143">

                        <div class="c_i_icon_arrow"></div>
                        <div class="c_i_icon_dot"><div class="c_i_icon_dot_child"></div></div>

                        <div class="c_i_head">

                            <div class="c_i_head_title">
                                <div class="c_i_head_title_icon">初<br/>&nbsp;&nbsp;&nbsp;五</div>
                                2014-3-31
                            </div>
                            <div class="c_i_head_intro">
                                <i class="ui_ico quote_before"></i>
                                在这春林初盛，草长莺飞的日子，QQ空间愿你关掉电脑，放下手机，与三五好友相约青山绿水中，感受春天带来的勃勃生机···
                                <i class="ui_ico quote_after"></i>
                            </div>
                        </div>
                        <div class="c_i_media">


                        </div>
                        <div class="c_i_footer">
                            <div class="c_i_footer_info">
                                    <a href="javascript:void(0)" class="op_zan" title="赞">
                                        <i class="ui_ico ico_zan">赞</i>(32906)</a>
                                    <a href="javascript:void(0)" class="op_pin" title="评论">
                                        <i class="ui_ico ico_com">评论</i>(883)</a>
                            </div>
                            <div class="c_i_footer_like">
                                3.2万人觉得很赞
                            </div>
                        </div>

                    </div>
        -->


    </div>
</div>

<script type="text/javascript" src="data.js"></script>
<script type="text/javascript" src="fx.js"></script>
<script type="text/javascript" src="GetLunarDay.js"></script>

<script type="text/javascript">

    //--------  公共函数

    var g = function (id) {
        return document.getElementById(id);
    }
    var getBodyW = function () {
        return document.body.offsetWidth;
    };
    var getBodyH = function () {
        return document.body.offsetHeight;
    };
    var getElTop = function (el) {
        return el.offsetTop + 170;
    };

    //--------  模版内容输出

    //  分析归类数据
    var list = {};  //  { year: { month : [ item ,item ] } }

    data.sort(function (a, b) {
        return new Date(a.date).getTime() > new Date(b.date).getTime();
    })

    //  格式化数据
    for (var i = data.length - 1; i >= 0; i--) {

        var date = new Date(data[i].date);
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var lunar = GetLunarDateString(date);

        if (!list[year]) {
            list[year] = {};
        }
        if (!list[year][month]) {
            list[year][month] = [];
        }

        var item = data[i];
        item.lunar = lunar[0] + '<br>&nbsp;&nbsp;&nbsp;' + lunar[1];
        item.like_format = item.like < 10000 ? item.like : ( item.like / 10000 ).toFixed(1) + '万';

        list[year][month].push(item);
    }
    ;


    //  最终html内容
    var html_scrubber = [];
    var html_content = [];

    //  模版
    var tpl_scrubber_year = g('tpl_scrubber_year').innerHTML.replace(/^\s*/, '').replace(/\s*$/, '');
    var tpl_scrubber_month = g('tpl_scrubber_month').innerHTML.replace(/^\s*/, '').replace(/\s*$/, '');

    var tpl_content_year = g('tpl_content_year').innerHTML.replace(/^\s*/, '').replace(/\s*$/, '');
    var tpl_content_month = g('tpl_content_month').innerHTML.replace(/^\s*/, '').replace(/\s*$/, '');

    //  构建时序和内容html
    for (year in list) {

        var scrubber_month = [];
        var content_month = [];

        var isLeft = 0;

        for (month in list[year]) {
            scrubber_month.unshift(tpl_scrubber_month.replace(/\{year\}/g, year).replace(/\{month\}/g, month));

            for (var i = list[year][month].length - 1; i >= 0; i--) {
                var item = list[year][month][i];

                isLeft = isLeft ^ 1;
                content_month.unshift(
                        ( (i == 0) ? '<div class="clear c_month" id="c_month_' + year + '_' + month + '"></div>' : '' ) + tpl_content_month.replace(/\{year\}/g, year).replace(/\{month\}/g, month)
                                .replace(/\{lunar\}/g, item.lunar)
                                .replace(/\{date\}/g, item.date)
                                .replace(/\{intro\}/g, item.intro)
                                .replace(/\{media\}/g, item.media)
                                .replace(/\{like\}/g, item.like)
                                .replace(/\{comment\}/g, item.comment)
                                .replace(/\{like_format\}/g, item.like_format)
                                .replace(/\{leftOrRight\}/g, isLeft ? 'left' : 'right')
                                .replace(/\{isFirst\}/g, i == 0 ? 'c_item_first' : '')
                );
            }
            ;

        }
        ;
        html_scrubber.unshift(tpl_scrubber_year.replace(/\{year\}/g, year).replace(/\{list\}/g, scrubber_month.join('')));

        html_content.unshift(tpl_content_year.replace(/\{year\}/g, year).replace(/\{list\}/g, content_month.join('')));
    }
    ;

    //  写入内容
    g('scrubber').innerHTML = '<a href="javascript:;" onclick="scrollTopTo(0)">现在</a>' + html_scrubber.join('') + '<a href="javascript:;" onclick="scrollTopTo(getBodyH())">出生</a>';
    g('content').innerHTML = html_content.join('') + tpl_content_year.replace(/\{year\}/g, '出生').replace(/\{list\}/g, '') + '<div class="clear c_month" id="c_month_0_0"></div>';


    //--------  脚本处理

    //  动画卷动
    var scrollTopTo = function (to) {
        var start = document.body.scrollTop;
        fx(function (now, type) {
            window.scroll(0, now);
        }, start, to);
    }


    //  展开时序
    var expandScrubber = function (year, elem) {

        var years = document.getElementsByClassName('s_year');
        var months = document.getElementsByClassName('s_month');

        var year_months = document.getElementsByClassName(year + '_month');

        //  清理所有年份的 cur 样式
        for (var i = years.length - 1; i >= 0; i--) {
            years[i].className = 's_year';
        }
        ;

        //  隐藏所有的月份
        for (var i = months.length - 1; i >= 0; i--) {
            months[i].style.display = 'none';
        }
        ;

        //  展现当前年份下所有的月份
        for (var i = year_months.length - 1; i >= 0; i--) {
            year_months[i].style.display = 'block';
        }
        ;

        //  设置当前年份的 cur 样式
        elem.className = 's_year cur';
    }

    //  高亮月份
    var highlightMonth = function (year, month, elem) {

        var months = document.getElementsByClassName(year + '_month');
        for (var i = months.length - 1; i >= 0; i--) {
            months[i].className = months[i].className.replace('cur', '');

        }
        ;
        elem.className = elem.className + ' cur';
    }

    //  年份点击处理
    var showYear = function (year, elem) {
        expandScrubber(year, elem);
        var top = getElTop(g('content_year_' + year));
        scrollTopTo(top);
        //  滚动到当前年份的位置
    }

    //  月份点击处理
    var showMonth = function (year, month, elem) {
        var top = getElTop(document.getElementsByClassName('content_date_' + year + '' + month)[0]);
        highlightMonth(year, month, elem);
        scrollTopTo(top);
    }


    //  根据窗口滚动条更新时序年份状态
    var updateScrubberOnTop = function (top) {

        var years = g('content').getElementsByClassName('c_year');
        var tops = [];

        for (var i = 0; i < years.length; i++) {
            tops.push(years[i].offsetTop);
        }
        ;

        for (var i = 1; i < tops.length; i++) {

            if (top > tops[i - 1] && top < tops[i]) {

                var year = years[i - 1].innerHTML;

                expandScrubber(year, g('scrubber_year_' + year));
                return;
            }
        }

    }

    //  根据窗口滚动条更新时序月份状态
    var updateMonthOnTop = function (top) {

        var months = g('content').getElementsByClassName('c_month');
        var tops = [];

        for (var i = 0; i < months.length; i++) {
            tops.push(months[i].offsetTop);
        }
        ;

        for (var i = 1; i < tops.length; i++) {

            if (top > tops[i - 1] && top < tops[i]) {

                var info = months[i - 1].id.split('_');
                var year = info[2];
                var month = info[3];
                highlightMonth(year, month, g('scrubber_month_' + year + month));

                return;
            }
        }
    }

    //  滚动条事件处理; 定位时间
    window.onscroll = function () {

        var top = document.body.scrollTop;

        if (top > 200) {
            g('scrubber').style.position = 'fixed';
            g('scrubber').style.left = (getBodyW() - 960) / 2 + 'px';
            g('scrubber').style.top = '60px';
        } else {
            g('scrubber').style.position = '';
            g('scrubber').style.left = '';
            g('scrubber').style.top = '';
        }

        //  更新时序状态
        updateScrubberOnTop(top);
        updateMonthOnTop(top);
    }

    //  窗口改变事件处理; 保持时序列表的位置
    window.onresize = function () {
        window.onscroll();
    }
</script>

</body>
</html>